<template>
  <div class="edit_profile">
    <mytopfun title="编辑资料">
      <van-icon name="arrow-left" slot="left" @click="back" />
      <van-icon name="home-o" slot="right" @click="goIndex" />
    </mytopfun>
    <div class="pic">
      <img :src="user.head_img" alt="" />
      <!-- afterRead 这个是文件读取完，触发的回调函数 -->
      <van-uploader :after-read="afterRead" />
    </div>
    <!-- 我们显示还是user.nickname的值，修改之后也是要变user.nickname -->
    <mycell
      title="昵称"
      :particulars="user.nickname"
      @click="nickshow = !nickshow"
    ></mycell>
    <!-- 这里我们的value 值也要把值赋给一个新的data数据，不然改变user的值，页面上也会改变 -->
    <van-dialog
      v-model="nickshow"
      title="修改昵称"
      show-cancel-button
      @confirm="changenick"
      @open="initnick"
    >
      <van-field
        v-model="newnick"
        label="昵称"
        placeholder="请输入用户名"
        required
      />
    </van-dialog>
    <mycell title="密码" particulars="******" @click="passshow = !passshow">
    </mycell>
    <!-- 修改密码 -->
    <van-dialog
      v-model="passshow"
      title="修改密码"
      show-cancel-button
      @confirm="changepass"
      :before-close="closeback"
      @open="initpass"
    >
      <!-- 旧密码 -->
      <van-field
        v-model="oldpass"
        label="旧密码"
        placeholder="请输入旧密码"
        required
      />
      <!-- 新密码 -->
      <van-field
        v-model="newpass"
        label="新密码"
        placeholder="请输入新密码"
        required
      />
    </van-dialog>
    <mycell
      title="性别"
      :particulars="user.gender == 0 ? '女' : '男'"
      @click="gendershow = !gendershow"
    ></mycell>
    <!-- 修改性别 -->
    <van-dialog
      v-model="gendershow"
      title="性别修改"
      show-cancel-button
      @confirm="changegender"
    >
      <!-- 默认值为user.gender -->
      <van-picker
        :columns="columns"
        :default-index="user.gender"
        @change="getgender"
      />
    </van-dialog>
  </div>
</template>

<script>
//引入的模块
import mytopfun from "@/components/mytopfun";
import mycell from "@/components/mycell";
import { userData, userEdit } from "@/apis/user";
import axios from "@/utils/myaxios";
import { upFile } from "@/apis/fileUpload";
export default {
  components: {
    mytopfun,
    mycell,
  },
  data() {
    return {
      user: {},
      nickshow: false, // 用户面修改弹出显示
      newnick: "",
      passshow: false, //密码修改页面显示还是隐藏
      oldpass: "", //
      newpass: "",
      gendershow: false, //性别弹窗显示
      columns: ["女", "男"],
      newgender: "", //先要
    };
  },
  methods: {
    // 我们要获取性别下拉的值
    getgender(a, b, c) {
      //  第3个参数为索引值，跟我们的gender一样，所以我们需要
      this.newgender = c;
      // 等到参数之后，我们按确定可以修改用户信息
    },
    async changegender() {
      let result = await userEdit(this.$route.params.id, {
        gender: this.newgender,
      });
      console.log(result);
      if (result.data.message == "修改成功") {
        // console.log(result.data.data.gender);
        this.$toast.success("修改成功");
        this.user.gender = result.data.data.gender;
      }
    },
    //按下确认修改密码
    async changepass() {
      // 我们先判断了用户输入的旧密码和新密码是否相同
      if (this.oldpass == this.user.password) {
        console.log(1);
        // 然后如果相同就可以进行密码修改，调用用户编辑
        let result = await userEdit(this.$route.params.id, {
          password: this.newpass,
        });
        console.log(result);
        // 修改成功后吧新密码赋给user对象
        if (result.data.message == "修改成功") {
          this.$toast.success(result.data.message);
          this.user.password = this.newpass;
        }
      } else {
        this.$toast.fail("修改失败");
        //如果，输入的旧密码和user的旧密码不一样
      }
    },
    //用户体验 ，当原始密码输入错误，按comfirm不会关闭
    closeback(action, done) {
      // console.log(action);
      if (this.oldpass != this.user.password && action != "cancel") {
        done(false);
      } else done(true);
    },
    // 当弹出框弹出时清空oldpass
    initpass() {
      // 把oldpass 和new 值清空
      this.oldpass = this.newpass = "";
    },
    // 按下确定改变用户输入的昵称
    async changenick() {
      let result = await userEdit(this.$route.params.id, {
        nickname: this.newnick,
      });
      // console.log(result);
      // 再把修改后的值，赋给user.nickname
      if (result.data.message == "修改成功") {
        this.$toast.success("修改成功");
        this.user.nickname = result.data.data.nickname;
      } else {
        this.$toast.fail("修改失败");
      }
    },
    // 我们需要把弹出框关闭时把里面newnick 值改成user值
    initnick() {
      // setTimeout(() => {
      this.newnick = this.user.nickname;
      // }, 10);
    },
    // 这个是文件读取完，触发的回调函数
    async afterRead(myfile) {
      //myfile 是files[0]一样的图片对象
      // 此时可以自行将文件上传至服务器
      // console.log(myfile);
      // file值需要加工，利用formData方式上传数据
      let myFormdata = new FormData();
      myFormdata.append("file", myfile.file);
      let res = await upFile(myFormdata);
      console.log(res);
      // 当上传成功，我们调用修改用户头像
      if (res.data.message == "文件上传成功") {
        let result = await userEdit(this.$route.params.id, {
          head_img: axios.defaults.baseURL + res.data.data.url,
        });
        this.$toast.success(res.data.message);
        // console.log(result);
        this.user.head_img = result.data.data.head_img;
        // 然后我们需要得到路径进行图片的src的双向绑定
      } else {
        this.$toast.fail("文件上传失败");
      }
    },
    back() {
      this.$router.go(-1);
    },
    goIndex() {
      this.$router.push({ path: "/index" });
    },
  },
  async mounted() {
    // 页面渲染之前要得到用户数据
    // console.log(this);
    // console.log(this.$route.params.id); // 先得到url传过来的值
    let id = this.$route.params.id;
    let res = await userData(id);
    console.log(res);
    this.user = res.data.data;
    // 获取到user，就把值赋给更改昵称 初始化更改
    // this.newgender = this.user.gender; //在初始化的时候把性别值给新值
    // this.newnick = this.user.nickname;   这个不需要，应为弹出框外面是绑定user.nickname
    // 判断用户是否有图片，没有的给个默认图片
    if (this.user.head_img) {
      axios.defaults.baseURL + this.user.head_img;
    } else {
      this.user.head_img =
        axios.defaults.baseURL + "/uploads/image/default.jpeg"; //基准路径，加默认图片地址
    }
  },
};
</script>
<style lang="less" scoped>
.pic {
  position: relative;
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  img {
    width: 70 /360 * 100vw;
    height: 70 /360 * 100vw;
    // height: 50 /360 * 100vh;
    border-radius: 50%;
  }
}
.van-icon-home-o::before {
  font-size: 25px;
  color: red;
}
.van-icon-arrow-left::before {
  font-size: 25px;
}
/deep/ .van-uploader__upload {
  width: 70 /360 * 100vw;
  height: 70 /360 * 100vw;
  border-radius: 50%;
}
/deep/ .van-uploader {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-47%, -45%);
  opacity: 0;
  // transform: translate(-50%, -50%);
}
</style>